<template>
  <div class="add-drug">
    <el-tabs v-model="ruleForm.type">
      <el-tab-pane class="add-drug-tab" name="1" :disabled="disabledTab1" label="中药饮片">
        <el-form :model="ruleForm" :rules="rules" ref="form1">
          <el-table :data="ruleForm.list1">
            <el-table-column  type="index" label="序号" min-width="20"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="drugName" label="药品名称">
              <template slot-scope="scope" >
                <el-form-item :prop="'list1.' + scope.$index + '.drugName'" :rules='rules.drugName'>
                  <el-input v-model="scope.row.drugName" size="small" placeholder="请输入药品名称"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="drugSpec" label="规格">
              <template slot-scope="scope" >
                <el-form-item :prop="'list1.' + scope.$index + '.drugSpec'" :rules='rules.drugSpec'>
                  <el-input v-model="scope.row.drugSpec" size="small" placeholder="g"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="drugManufactor" label="生产厂家">
              <template slot-scope="scope" >
                <el-form-item :prop="'list1.' + scope.$index + '.drugManufactor'" :rules='rules.drugManufactor'>
                  <el-input v-model="scope.row.drugManufactor" size="small" placeholder="请输入厂家"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="doseUnit" label="剂量单位">
              <template slot-scope="scope" >
                <el-form-item :prop="'list1.' + scope.$index + '.doseUnit'" :rules='rules.doseUnit'>
                  <el-select v-model="scope.row.doseUnit" placeholder="请选择单位">
                    <el-option
                      v-for="(item, index) in units"
                      :key="index"
                      :label="item.label"
                      :value="item.label"
                    />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="packageUnit" label="销售单位">
              <template slot-scope="scope" >
                <el-form-item :prop="'list1.' + scope.$index + '.packageUnit'" :rules='rules.packageUnit'>
                  <el-select v-model="scope.row.packageUnit" placeholder="请选择单位">
                    <el-option
                      v-for="(item, index) in packageUnits"
                      :key="index"
                      :label="item.label"
                      :value="item.label"
                    />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="salePrice" label="零售价" width="160px">
              <template slot-scope="scope" >
                <el-form-item :prop="'list1.' + scope.$index + '.salePrice'" :rules='rules.salePrice'>
                  <el-input-number :precision="4" v-model="scope.row.salePrice" placeholder="零售价"></el-input-number>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="stockWarning" label="库存预警" width="160px">
              <template slot-scope="scope" >
                <el-form-item :prop="'list1.' + scope.$index + '.stockWarning'" :rules='rules.stockWarning'>
                  <el-input-number v-model="scope.row.stockWarning" placeholder="预警值"></el-input-number>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100px">
              <template slot-scope="scope">
                <el-button v-if="isAdd" type="text" @click="onDel(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
        <template v-if="isAdd">
          <el-button class="add-drug-btn" type="text" icon="el-icon-plus" @click="onAddClick(1)">添加药品</el-button>
        </template>
      </el-tab-pane>
      <el-tab-pane class="add-drug-tab" name="2" :disabled="disabledTab2" label="配方颗粒">
        <el-form :model="ruleForm" :rules="rules" ref="form2">
          <el-table :data="ruleForm.list2">
            <el-table-column  type="index" label="序号" min-width="20"></el-table-column>
            <el-table-column prop="drugName" label="药品名称">
              <template slot-scope="scope" >
                <el-form-item :prop="'list2.' + scope.$index + '.drugName'" :rules='rules.drugName'>
                  <el-input v-model="scope.row.drugName" size="small" placeholder="请输入药品名称"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="drugSpec" label="规格">
              <template slot-scope="scope" >
                <el-form-item :prop="'list2.' + scope.$index + '.drugSpec'" :rules='rules.drugSpec'>
                  <el-input
                    v-model="scope.row.drugSpec"
                    placeholder="g"
                    @change="onChangeDrugSpec(scope.row, $event)"
                    size="small"
                  />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="coefficientName" label="采购规格">
              <template slot-scope="scope" >
                <el-form-item :prop="'list2.' + scope.$index + '.coefficientName'" :rules='rules.coefficientName'>
                  <el-input
                    v-model="scope.row.coefficientName"
                    placeholder="采购单位"
                    size="small"
                  />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="coefficient" label="换算系数(瓶当量)">
              <template slot-scope="scope" >
                <el-form-item :prop="'list2.' + scope.$index + '.coefficient'" :rules='rules.coefficient'>
                  <el-input-number
                    v-model="scope.row.coefficient"
                    :precision="0"
                    size="small"
                    :min="0"
                  />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="drugEquivalent" label="克当量" v-if="operations != 0">
              <template slot-scope="scope" >
                <el-form-item :prop="'list2.' + scope.$index + '.drugEquivalent'" :rules='rules.drugEquivalent'>
                  <el-input-number
                    v-model="scope.row.drugEquivalent"
                    placeholder="当量"
                    :min="0"
                  >
                  </el-input-number>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="drugManufactor" label="生产厂家">
              <template slot-scope="scope" >
                <el-form-item :prop="'list2.' + scope.$index + '.drugManufactor'" :rules='rules.drugManufactor'>
                  <el-input v-model="scope.row.drugManufactor" size="small" placeholder="请输入厂家"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="doseUnit" label="剂量单位">
              <template slot-scope="scope" >
                <el-form-item :prop="'list2.' + scope.$index + '.doseUnit'" :rules='rules.doseUnit'>
                  <el-select v-model="scope.row.doseUnit" placeholder="请选择单位">
                    <el-option
                      v-for="(item, index) in units"
                      :key="index"
                      :label="item.label"
                      :value="item.label"
                    />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="packageUnit" label="销售单位">
              <template slot-scope="scope" >
                <el-form-item :prop="'list2.' + scope.$index + '.packageUnit'" :rules='rules.packageUnit'>
                  <el-select v-model="scope.row.packageUnit" placeholder="请选择单位">
                    <el-option
                      v-for="(item, index) in packageUnits"
                      :key="index"
                      :label="item.label"
                      :value="item.label"
                    />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="salePrice" label="零售价">
              <template slot-scope="scope" >
                <el-form-item :prop="'list2.' + scope.$index + '.salePrice'" :rules='rules.salePrice'>
                  <el-input-number :precision="4" v-model="scope.row.salePrice" placeholder="零售价"></el-input-number>
                </el-form-item> 
              </template>
            </el-table-column>
            <el-table-column prop="stockWarning" label="库存预警">
              <template slot-scope="scope" >
                <el-form-item :prop="'list2.' + scope.$index + '.stockWarning'" :rules='rules.stockWarning'>
                  <el-input-number v-model="scope.row.stockWarning" placeholder="预警值"></el-input-number>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100px">
              <template slot-scope="scope">
                <el-button v-if="isAdd" type="text" @click="onDel(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
        <template v-if="isAdd">
          <el-button class="add-drug-btn" type="text" icon="el-icon-plus" @click="onAddClick(2)">添加药品</el-button>
        </template>
      </el-tab-pane>
      <el-tab-pane class="add-drug-tab" name="3" :disabled="disabledTab3" label="中成药">
        <drugInfo
          :pharmacyId="pharmacyId"
          :drugType="3"
          ref="form3"
        />
      </el-tab-pane>
      <el-tab-pane class="add-drug-tab" name="4" :disabled="disabledTab4" label="西药">
        <drugInfo
          :pharmacyId="pharmacyId"
          :drugType="4"
          ref="form4"
        />
      </el-tab-pane>
      <el-tab-pane class="add-drug-tab" name="5" :disabled="disabledTab5" label="耗材">
        <drugInfo
          :pharmacyId="pharmacyId"
          :drugType="5"
          ref="form5"
        />
      </el-tab-pane>
      <el-tab-pane class="add-drug-tab" name="6" :disabled="disabledTab6" label="敷贴粉剂">
        <el-form :model="ruleForm" :rules="rules" ref="form6">
          <el-table :data="ruleForm.list3">
            <el-table-column  type="index" label="序号" min-width="20"></el-table-column>
            <el-table-column prop="drugName" label="药品名称">
              <template slot-scope="scope" >
                <el-form-item :prop="'list3.' + scope.$index + '.drugName'" :rules='rules.drugName'>
                  <el-input v-model="scope.row.drugName" size="small" placeholder="请输入药品名称"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="drugSpec" label="规格">
              <template slot-scope="scope" >
                <el-form-item :prop="'list3.' + scope.$index + '.drugSpec'" :rules='rules.drugSpec'>
                  <el-input v-model="scope.row.drugSpec" size="small" placeholder="g"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column  prop="drugManufactor" label="生产厂家">
              <template slot-scope="scope" >
                <el-form-item :prop="'list3.' + scope.$index + '.drugManufactor'" :rules='rules.drugManufactor'>
                  <el-input v-model="scope.row.drugManufactor" size="small" placeholder="请输入厂家"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="doseUnit" label="剂量单位">
              <template slot-scope="scope" >
                <el-form-item :prop="'list3.' + scope.$index + '.doseUnit'" :rules='rules.doseUnit'>
                  <el-select v-model="scope.row.doseUnit" placeholder="请选择单位">
                    <el-option
                      v-for="(item, index) in units"
                      :key="index"
                      :label="item.label"
                      :value="item.label"
                    />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="packageUnit" label="包装单位">
              <template slot-scope="scope" >
                <el-form-item :prop="'list3.' + scope.$index + '.packageUnit'" :rules='rules.packageUnit'>
                  <el-select v-model="scope.row.packageUnit" placeholder="请选择单位">
                    <el-option
                      v-for="(item, index) in packageUnits"
                      :key="index"
                      :label="item.label"
                      :value="item.label"
                    />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="salePrice" label="零售价">
              <template slot-scope="scope" >
                <el-form-item :prop="'list3.' + scope.$index + '.salePrice'" :rules='rules.salePrice'>
                  <el-input-number v-model="scope.row.salePrice" :precision="4" placeholder="零售价"></el-input-number>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="stockWarning" label="库存预警">
              <template slot-scope="scope" >
                <el-form-item :prop="'list3.' + scope.$index + '.stockWarning'" :rules='rules.stockWarning'>
                  <el-input-number v-model="scope.row.stockWarning" placeholder="预警值"></el-input-number>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100px">
              <template slot-scope="scope">
                <el-button v-if="isAdd" type="text" @click="onDel(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
        <template v-if="isAdd">
          <el-button class="add-drug-btn" type="text" icon="el-icon-plus" @click="onAddClick(6)">添加药品</el-button>
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "addEditDrug",
  inheritAttrs: false,
  components: {
    drugInfo: () => import("./drugInfo")
  },
  computed: {
    disabledTab1() {
      return !this.isAdd && this.ruleForm.type != "1";
    },
    disabledTab2() {
      return !this.isAdd && this.ruleForm.type != "2";
    },
    disabledTab3() {
      return !this.isAdd && this.ruleForm.type != "3";
    },
    disabledTab4() {
      return !this.isAdd && this.ruleForm.type != "4";
    },
    disabledTab5() {
      return !this.isAdd && this.ruleForm.type != "5";
    },
    disabledTab6() {
      return !this.isAdd && this.ruleForm.type != "6";
    }
  },
  data() {
    return {
      packageUnits: [],
      operations:0,
      units: [],
      ruleForm: {
        type: "1",
        list1: [],
        list2: [],
        list3: []
      },
      rules: {
        drugName: [
          { required: true, message: '请输入药品名称', trigger: 'blur'}
        ],
        drugSpec: [
          { required: false, message: '请输入规格', trigger: 'blur'}
        ],
        drugManufactor: [
          { required: false, message: '请输入厂家', trigger: 'blur'}
        ],
        doseUnit: [
          { required: false, message: '请选择单位', trigger: 'blur'}
        ],
        packageUnit: [
          { required: false, message: '请选择单位', trigger: 'blur'}
        ],
        salePrice: [
          { required: true, message: '请输入零售价', trigger: 'blur'}
        ],
        stockWarning: [
          { required: true, message: '请输入预警值', trigger: 'blur'}
        ],
        drugEquivalent: [
          { 
            required: true,
            trigger: 'blur',
            validator(rule, value, callback) {
              if(!value) {
                callback(new Error("请输入当量"));
              }
              if(value <= 0) {
                callback(new Error("当量必须大于0"));
              }
              callback();
            },
          },
          { 
            required: true,
            trigger: 'change',
            validator(rule, value, callback) {
              if(!value) {
                callback(new Error("请输入当量"));
              }
              if(value <= 0) {
                callback(new Error("当量必须大于0"));
              }
              callback();
            },
          },
        ]
      },
      pharmacyId: null,
      isAdd: false
    }
  }, 
  created() {
    this.$store.dispatch("GetInfo").then(res => {
      this.pharmacyId = res.pharmacyId;
      if(this.isAdd) {
        this.onAddClick(1);
        this.onAddClick(2);
        this.onAddClick(6);
      }
    });
  },
  mounted() {
    // 包装单位和剂量单位
    this.$store.getters.doseUnit.forEach(item => {
      this.units.push({
        label: item.text,
        value: item.id
      });
    });
    this.$store.getters.packageUnit.forEach(item => {
      this.packageUnits.push({
        label: item.text,
        value: item.id
      });
    });
  },
  methods: {
    validate(fun) {
      let form = this.$refs["form" + this.ruleForm.type];
      form.validate(valid => {
        fun(valid);
      });
    },
    clearValidate() {
      let form = this.$refs["form" + this.ruleForm.type];
      form.clearValidate();
      this.resetForm();
    },
    onAddClick(type) {
      switch(type) {
        case 1:
          this.ruleForm.list1.push({
            drugName: "",
            drugSpec: "g",
            drugManufactor: "",
            doseUnit: "g",
            packageUnit: "g",
            salePrice: null,
            stockWarning: 1500,
            drugType: type,
            pharmacyId: this.pharmacyId,
            status: 0,
            coefficientName: null,
            coefficient: null
          });
          break;
        case 2:
          this.ruleForm.list2.push({
            drugName: "",
            drugSpec: "g",
            drugManufactor: "",
            doseUnit: "g",
            packageUnit: "g",
            salePrice: null,
            stockWarning: 1500,
            drugEquivalent: "",
            drugType: 2,
            pharmacyId: this.pharmacyId,
            status: 0,
            coefficientName: "g",
            coefficient: null
          });
          break;
        case 6: 
          this.ruleForm.list3.push({
            drugName: "",
            drugSpec: "",
            drugManufactor: "",
            doseUnit: "",
            packageUnit: "",
            salePrice: null,
            stockWarning: "",
            drugType: 6,
            pharmacyId: this.pharmacyId,
            status: 0,
            coefficientName: null,
            coefficient: null
          });
          break;
      }
    },
    getParam() {
      let res;
      let drugType = Number(this.ruleForm.type);
      switch(drugType) {
        case 1:
          res = this.ruleForm.list1;
          break;
        case 2:
          res = this.ruleForm.list2;
          break;
        case 3:
          res = this.$refs.form3.getParam();
          break;
        case 4:
          res = this.$refs.form4.getParam();
          break;
        case 5:
          res = this.$refs.form5.getParam();
          break;
        case 6:
          res = this.ruleForm.list3;
          break;
      }
      return {
        data: res,
        type: drugType
      };
    },
    resetForm() {
      this.ruleForm.list1 = [];
      this.ruleForm.list2 = [];
      this.ruleForm.list3 = [];
      this.$refs.form3.resetForm();
      this.$refs.form4.resetForm();
      this.$refs.form5.resetForm();
    },
    setOperation(type, data) {
      this.operations = type;
      let f = null;
      switch(type) {
        case 0:
          if(this.pharmacyId) {
            this.onAddClick(1);
            this.onAddClick(2);
            this.onAddClick(6);
          }
          this.ruleForm.type = "1";
          this.isAdd = true;
          break;
        case 1:
          let drugType = data.drugType;
          this.ruleForm.type = drugType + "";
          if(drugType == 1 || drugType == 2){
            data.packageUnit = 'g';
            data.doseUnit = 'g';
          }
          this.isAdd = false;
          switch(drugType) {
            case 1:
              this.ruleForm.list1 = [];
              this.ruleForm.list1.push(data);
              break;
            case 2:
              this.ruleForm.list2 = [];
              this.ruleForm.list2.push(data);
              break;
            case 3:
            case 4:
            case 5:
              f = data;
              break;
            case 6:
              this.ruleForm.list3 = [];
              this.ruleForm.list3.push(data);
              break;
          }
          break;
      }

      if(f != null) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.$refs["form" + this.ruleForm.type].resetForm(f);
          }, 500);
        });
      }
    },
    onDel(index) {
      let list = [];
      switch(Number(this.ruleForm.type)) {
        case 1:
          list = this.ruleForm.list1;
          break;
        case 2:
          list = this.ruleForm.list2;
          break;
        case 6:
          list = this.ruleForm.list3;
          break;
      }
      list.splice(index, 1);
    },
    onChangeDrugSpec(row, value) {
      // 颗粒剂，采购单位默认为规格
      row.coefficientName = value;
    },
  }
}
</script>

<style>
  .add-drug-btn {
    font-size: 14px;
  }
  .add-drug-tab .el-form-item--small.el-form-item {
    margin-bottom: 0;
  }
</style>